<template>
  <div style="height:982px;padding:15px;background-color: #F7F9FF">
    <el-card style="margin: 30px 370px 10px;height: 870px;">
    <div class="main">
      <div class="center">
        <p class="lll">联系我们</p>
        <div class="f1">
          <div class="left">
            <el-card style="width: 650px;height: 199px;">
              <img src="../../assets/contact/2.png" class="custom1">
              <p class="eee">深圳市宝安区光源科技城</p>
            </el-card>
          </div>
          <div class="right">
            <el-card style="width: 650px;height: 199px;">
              <img src="../../assets/contact/1.png" class="custom2">
              <p class="fff">总部传真/电话: 05998611333</p>
            </el-card>
          </div>
        </div>

        <div class="f2">
          <div id="mapContainer" style="width:100%;height:490px;"></div>
        </div>
      </div>
    </div>
  </el-card>
  </div>
</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted} from "vue";
//一进到页面立即加载地图
onMounted(()=>{
  //表示DOM更新完毕后立即执行的方法,因为我们要确保上方的地图容器div已创建,才能往div里装地图
  nextTick(()=>{
    //创建地图实例,注意:忽略导入语句!不需要导入!
    let map = new BMapGL.Map("mapContainer");
    //设置地图展示的中心点,此处的坐标是天安门的经纬度
    let point = new BMapGL.Point(116.4074, 39.9024);
    //设置地图对象的中心点与缩放级别
    map.centerAndZoom(point, 15);
  })
})
</script>

<style scoped>
/**********公共CSS*******************/
*{
  margin: 0;
  padding: 0;
}
.center{
  width: 2000px;
  margin: 0 auto;
}

.lll {
  font-size: 38px;
  color: #3366FE;
  font-weight: bold;
  position: relative;
  top: 10px;
  left: 20px;
}
/*1F CSS*/
.f1{
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 10px;
}
/*1F 左侧 CSS*/
.f1>.left{
  float: left;
  margin: 10px 10px 10px 15px;
  position: relative;
}
.custom1 {
  position: relative;
  top: 15px;
  left: 10px;
}
.eee {
  font-size: 20px;
  color: #333;
  font-weight: lighter;
  float: right;
  position: relative;
  top: 65px;
  right: 250px;
}
/*1F 右侧 CSS*/
.f1>.right{
  float: left;
  margin: 10px 10px 10px 15px;
  position: relative;
}
.custom2 {
  position: relative;
  top: 15px;
  left: 30px;
}
.fff {
  font-size: 20px;
  color: #333;
  font-weight: lighter;
  float: right;
  position: relative;
  top: 65px;
  right: 150px;
}
/*2F CSS*/
.f2{
  overflow: hidden;
  width: 1330px;
  height: 490px;
  margin: 15px 15px 30px 15px;
}
</style>